<template>
    <!--index.wxml-->
    <view class="allPage">
        <view class="content">

            <view class="status">
                <text class="b"> {{json.orderStatusStr || ''  }}</text>
                <text v-if="json.ifGroupPurchase == 1" class="j-tag red">拼团订单</text>
                
                <text v-if="json.goodsGroupPurchaseStatus == 2" class="j-tag green full">拼团成功</text>
                <text v-else-if="json.goodsGroupIsEnd == 1" class="j-tag red full">已过期</text>
            </view>

            <view v-if="(json.goodsGroupPurchaseStatus == 1 || json.goodsGroupPurchaseStatus == 2)   && json.goodsGroupIsEnd != 1 && purchaseNums > 0" class="groupLine " @click="$goNext('/pages/group/people?orderId='+json.id+'&goodsGroupPurchaseId='+json.goodsGroupPurchaseId)">

                <RightTemplate rightColor='#ffffff'>

                    <view class="groupBox">
                        <view>
                            <image src="../../../static/images/group.png" mode="widthFix" />
                        </view>
                        <view class="text-center">
                            <text class="status">{{json.goodsGroupPurchaseStatusStr }}</text>
                            <Countdown :endTime='json.goodsGroupEndTime' dark/>
                            <text class="f20 col-hui">后失效</text>
                            <text class="ml5 col-green">还可拼{{ purchaseNums}}人</text>
                        </view>
                    </view>
                   

                </RightTemplate>

            </view>

            <view class="parts" v-if="sendInfo && sendInfo.appid">
                <view class="head-tit">
                    <text>配送信息</text>
                </view>
                <view class="line">

                    <view class="l">
                        <text >送货人</text>
                    </view>
                    <view class="r none">
                        <text>{{ sendInfo.transporter_info.transporter_name}}</text>
                    </view>
                </view>
                 <view class="line">

                    <view class="l">
                        <text >联系电话</text>
                    </view>
                    <view class="r none">
                        <text>{{ sendInfo.transporter_info.transporter_phone}}</text>

                        <text class="boda " @click="$takePhone( sendInfo.transporter_info.transporter_phone )">拨打</text>
                    </view>
                </view>
                <view class="line" v-if="sendInfo.expected_finish_time">
                    <view class="l">
                        <text >送达时间</text>
                    </view>
                    <view class="r none">
                        <text>大约{{sendInfo.expected_finish_time_show}}</text>
                    </view>
                </view>
                <!-- <view class="sendAddress">
                  
                    <view class="">
                        <text class="">{{json.placeOrderUser.roomNumber}}</text>
                    </view>
                    <text>{{json.villageModel.name}} (<text class="col-hui">{{json.villageModel.address}}</text>)</text>
                
                </view>  -->
            </view>

            <DetailTemplate :json="json" showMarkt isUser />

        </view>

          <LoadMask v-if="initMask" />

    </view>
</template>
<script>
import { statusList, DealOrderInfo } from '../../../utils/configDIct.js'
import { parseTime } from '../../../utils/tools'
import DetailTemplate from '../../../components/DetailTemplate'
import RightTemplate from '@/components/RightTemplate'
import Countdown from '@/components/Countdown'
const app = getApp();

export default {
    components: { DetailTemplate, RightTemplate, Countdown },
    data () {
        return {
            initMask:true,
            orderId: '',
            json: {
                placeOrderUser: {},
                orderGoodsModelList: [],
                dispatcherUser: {},
                villageModel: {},
                flashSupermarketModel: {}
            },

            statusList: statusList,
            appointDate: '',
            //倒计时
            GroupEndTime: undefined,
            //还可拼人数
            purchaseNums:0,
            //配送信息
            sendInfo:{}
        }
    },
    computed: {

    },

    onLoad (option) {
        // console.log('999999999999999',this.wechatInfo)
        this.orderId = option.id
        this.initPage()
    },
    mounted () {


        app.laterToken(bool => {

            app.logRecord('订单详情')

        })

    },
    methods: {
        initPage (cb) {

            this.initMask =true

            this.$axios({ url: 'flash/supermarket/order/get', data: this.orderId })
                .then(res => {

                    let json = DealOrderInfo([res.data], this.statusList)[0]
                   

                    this.json = json
                    // this.appointDate = this.appointDateFunc( res.data )

                    if (json.wxOrderId && json.orderStatus >=30000) {
                        this.getDeliverInfo(json.wxOrderId)
                    }
                    

                    this.goGetGroupInfo( json)

                     this.initMask = false

                    cb && cb()

                })

        },
        //如果是拼团订单
        goGetGroupInfo (row) {

            if(row.ifGroupPurchase == 1 && row.payStatus == 1 ) {

                 console.log('999999999999999',row, row.goodsGroupPurchaseId  )

                 this.$axios({ url: 'flash/supermarket/goods/group/purchase/getDetail', data: row.goodsGroupPurchaseId })
                .then(res => {

                    console.log('拼团详情', res)

                    let json = res.data

                    let purchaseDetailModelList = json.purchaseDetailModelList

                    // while (purchaseDetailModelList.length < 4) {

                    //     purchaseDetailModelList.push({})

                    // }

                    // this.purchaseDetailModelList = purchaseDetailModelList

                    this.purchaseNums = 4 - purchaseDetailModelList.length

                    this.GroupEndTime = json.endTime

                    // this.json = DealOrderInfo( [res.data] ,this.statusList )[0]

                    // this.countTimeFunc(json.endTime)

                    // cb && cb()

                })
            }

           
        },
        //查询配送信息
        getDeliverInfo (wxOrderId) {

            this.$axios({url:"flash/smallapplet/logistics/services/queryPsd",data:{
                "wx_order_id": wxOrderId || '4014603988446217728',

            }})
                .then(res => {

                    // console.log('查询配送信息', res)

                    let showTime = parseTime( res.data.expected_finish_time )
                    
                    this.sendInfo = res.data

                    this.sendInfo.expected_finish_time_show = showTime

                })
                .catch(msg => {
                })

        },
        //格式化预约时间
        appointDateFunc (json) {

            let appointDay = new Date(json.dispatcherEndTime).getDate();
            let today = new Date().getDate();

            let str = '';

            // console.log('1231231212222', appointDay , today )

            if (appointDay == today) {
                str = '今日 '
            }
            else if (appointDay == (today + 1)) {
                str = '明天 '
            }
            else if (appointDay == (today + 2)) {
                str = '后天 '
            }
            else {
                str = json.dispatcherEndTime.split(' ')[0]
            }

            str += parseTime(json.dispatcherStartTime, '{h}:{i}') + ' - ' + parseTime(json.dispatcherEndTime, '{h}:{i}')

            return str

        },
        //下拉刷新
        onPullDownRefresh () {

            this.initPage(() => {
                uni.stopPullDownRefresh();//停止刷新
            })

        },
        goSave () {

        },

    },
    onHide () {
        
    },
    onUnload () {
        
    }

}
</script>
<style lang="scss" scoped>
.content {
    padding: 30rpx 32rpx;
    .parts {
        padding: 30rpx 30rpx 30rpx;
    }
    .status {
        min-height: 52rpx;
        font-size: 40rpx;
        margin-bottom: 30rpx;
    }
    .head-tit {
        font-weight: bold;
        color: #000;
        font-size: 28rpx;
        margin-bottom: 20rpx;
    }
    .line {
        color: #565656;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10rpx 0;
        .l {
            text-align: left;
            margin-left: 10px;
            max-width: 500rpx;
            min-width: 160rpx;
        }
        .r {
            flex: 1;
            width: 100%;
            // border-bottom: 1rpx solid #f1f1f1;
            // padding-bottom: 20rpx;
            &.none {
                border: none;
            }
        }
        .b {
            // font-weight: bold;
        }
        .min {
            font-size: 24rpx;
        }
        ::v-deep .holderClass {
            color: #c1c1c1;
        }
        .icon {
            color: #c1c1c1;
            font-size: 24rpx;
            line-height: 38rpx;
        }
        .address {
            font-size: 22rpx;
            color: #565656;
        }
    }
    .sendAddress {
        font-size: 24rpx;
        color: #000;
        padding-top: 30rpx;
        margin-top: 30rpx;
        border-top: 1rpx solid #f6f6f6;
        line-height: 1.5;
    }
    .priceBox {
        padding: 0 32rpx 10rpx;
        font-size: 34rpx;
        .min {
            font-size: 24rpx;
        }
    }
}
    .groupLine{
        text-align: center;
        padding: 4rpx 30rpx;
        line-height: 1.5;
        background: linear-gradient(to right,#fae6b4, #fad469,);
        border-radius: 50rpx;
        // width: 80%;
        margin:30rpx 0rpx 30rpx;
        // background: rgba(253, 246, 241, 0.8); #ff8f44
        .groupBox{
            display: flex;
            align-items: center;
            image{
                width: 60rpx;
                height: 60rpx;
            }
            .status{
                font-weight: bold;
                font-size: 30rpx;
                color: rgb(95, 35, 14);
                margin: 0 10rpx 0 14rpx;
            }
        }
    }
    .boda{
        float: right;
        border-radius: 2rpx;
        line-height: 1.2;
        padding: 6rpx 10rpx;
        font-size: 22rpx;
        border: 1rpx solid #00af63;
        color: #00af63;
    }
</style>